// 温馨提示内容数组（增加到80条）
const messages = [
    "保持微笑呀",
    "期待下一次见面",
    "早点休息",
    "今天也要好好爱自己",
    "天气冷了，多穿衣服",
    "记得喝水呀",
    "梦想总会实现",
    "都要开心点哦",
    "今天辛苦啦",
    "要多喝水哦",
    "每天都要元气满满",
    "记得吃水果",
    "适当休息一下",
    "愿所有烦恼都消失",
    "你很棒",
    "相信自己",
    "加油鸭",
    "保重身体",
    "好好吃饭",
    "晚安好梦",
    "你是最好的",
    "继续努力",
    "别太累了",
    "开心每一天",
    "慢慢来比较快",
    "一切都会好的",
    "相信明天会更好",
    "你值得被爱",
    "今天也很美好",
    "注意安全",
    "多笑一笑",
    "世界因你而美好",
    "做自己就好",
    "放松心情",
    "享受当下",
    "心想事成",
    "健康最重要",
    "珍惜当下",
    "保持热爱",
    "不要放弃",
    "你很重要",
    "好运连连",
    "心情美美哒",
    "温柔对待自己",
    "生活很美好",
    "一步一个脚印",
    "今天也要快乐",
    "你是独一无二的",
    "拥抱美好",
    "时光不负有心人",
    "阳光总在风雨后",
    "保持好奇心",
    "每天进步一点点",
    "相信自己的力量",
    "幸福就在身边",
    "爱你所爱",
    "勇敢追梦",
    "今天是崭新的一天",
    "你值得拥有最好的",
    "微笑面对生活",
    "保持积极心态",
    "明天会更精彩",
    "做最真实的自己",
    "生活充满惊喜",
    "感恩每一天",
    "你是最棒的",
    "坚持就是胜利",
    "美好的事即将发生",
    "相信奇迹会出现",
    "每一天都是礼物",
    "笑容是最好的名片",
    "保持童心",
    "善待自己",
    "你值得所有美好",
    "今天也是元气满满",
    "开开心心过好每一天",
    "保持乐观",
    "未来可期",
    "生活需要仪式感",
    "慢慢享受过程",
    "心存感激",
];

const cardsWrapper = document.getElementById('cardsWrapper');

// 检测是否为移动设备
function isMobile() {
    return window.innerWidth <= 768 || /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}

// 生成爱心形状的坐标点
function generateHeartPositions(count) {
    const positions = [];
    const centerX = window.innerWidth / 2;
    const centerY = window.innerHeight / 2;
    
    // 根据设备调整爱心尺寸
    const mobile = isMobile();
    const scale = mobile 
        ? Math.min(window.innerWidth, window.innerHeight) * 0.4  // 移动端稍小
        : Math.min(window.innerWidth, window.innerHeight) * 0.5; // PC端大
    
    for (let i = 0; i < count; i++) {
        const t = (i / count) * Math.PI * 2;
        
        // 爱心参数方程
        const x = 16 * Math.pow(Math.sin(t), 3);
        const y = -(13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t));
        
        // 移动端减小随机偏移
        const offsetRange = mobile ? 20 : 30;
        const offsetX = (Math.random() - 0.5) * offsetRange;
        const offsetY = (Math.random() - 0.5) * offsetRange;
        
        // 移动端调整卡片宽度偏移
        const cardWidthOffset = mobile ? 80 : 140;
        
        positions.push({
            x: centerX + x * scale / 20 + offsetX - cardWidthOffset,
            y: centerY + y * scale / 20 + offsetY - 30
        });
    }
    
    return positions;
}

// 存储已使用的位置，确保卡片不会太靠近
const usedPositions = [];

// 检查位置是否与已有位置冲突
function isPositionValid(x, y, minDistance) {
    for (const pos of usedPositions) {
        const distance = Math.sqrt(Math.pow(x - pos.x, 2) + Math.pow(y - pos.y, 2));
        if (distance < minDistance) {
            return false;
        }
    }
    return true;
}

// 生成随机起始位置（在屏幕内的随机位置，极度分散）
function generateRandomStartPosition() {
    const mobile = isMobile();
    
    // 移动端使用更小的卡片尺寸和边距
    const cardWidth = mobile ? 160 : 280;
    const cardHeight = mobile ? 150 : 200;
    const padding = mobile ? 5 : 10;
    
    const maxWidth = window.innerWidth - cardWidth - padding * 2;
    const maxHeight = window.innerHeight - cardHeight - padding * 2;
    
    // 移动端使用更小的最小距离
    const minDistance = mobile ? 100 : 150;
    const fallbackDistance = mobile ? 50 : 80;
    
    let x, y;
    let attempts = 0;
    const maxAttempts = mobile ? 30 : 50; // 移动端减少尝试次数提升性能
    
    // 尝试找到一个不与其他卡片冲突的位置
    do {
        x = padding + Math.random() * maxWidth;
        y = padding + Math.random() * maxHeight;
        attempts++;
    } while (!isPositionValid(x, y, minDistance) && attempts < maxAttempts);
    
    // 如果经过多次尝试仍然冲突，减小最小距离要求
    if (attempts >= maxAttempts) {
        do {
            x = padding + Math.random() * maxWidth;
            y = padding + Math.random() * maxHeight;
            attempts++;
        } while (!isPositionValid(x, y, fallbackDistance) && attempts < maxAttempts * 2);
    }
    
    // 记录这个位置
    usedPositions.push({ x, y });
    
    return { x, y };
}

// 创建卡片
function createCard(message, index, finalPosition) {
    const card = document.createElement('div');
    card.className = `card color-${(index % 8) + 1}`;
    
    // 获取随机起始位置（在屏幕内）
    const startPos = generateRandomStartPosition();
    
    // 设置初始位置（在随机位置，但是很小且模糊）
    card.style.left = `${startPos.x}px`;
    card.style.top = `${startPos.y}px`;
    card.style.opacity = '0';
    card.style.transform = 'scale(0.1)';
    card.style.filter = 'blur(10px)';
    
    // 存储位置信息
    card.dataset.finalX = finalPosition.x;
    card.dataset.finalY = finalPosition.y;
    card.dataset.startX = startPos.x;
    card.dataset.startY = startPos.y;
    
    card.innerHTML = `
        <div class="card-body">
            <img src="images/tx.jpg" alt="Yara" class="user-avatar">
            <div class="card-content">
                <div class="user-name">@Yara</div>
                <div class="card-text">${message}</div>
            </div>
        </div>
    `;
    
    return card;
}

// 两阶段动画
function animateCard(card, delay) {
    const startX = parseFloat(card.dataset.startX);
    const startY = parseFloat(card.dataset.startY);
    const finalX = parseFloat(card.dataset.finalX);
    const finalY = parseFloat(card.dataset.finalY);
    
    // 第一阶段：在随机位置由远到近、由小变大出现（0.8秒）
    setTimeout(() => {
        card.style.transition = 'all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1)';
        card.style.opacity = '1';
        card.style.transform = 'scale(1)';
        card.style.filter = 'blur(0px)';
        
        // 第二阶段：移动到爱心位置（延迟1秒后开始，持续1.5秒）
        setTimeout(() => {
            card.style.transition = 'all 1.5s cubic-bezier(0.4, 0, 0.2, 1)';
            card.style.left = `${finalX}px`;
            card.style.top = `${finalY}px`;
        }, 1000);
    }, delay);
}

// 存储卡片和位置信息，等待启动
let pendingCards = [];
let pendingHeartPositions = [];

// 初始化所有卡片（创建但不播放动画）
function initCards() {
    // 清空容器
    cardsWrapper.innerHTML = '';
    
    // 清空已使用位置记录
    usedPositions.length = 0;
    
    // 生成爱心位置
    pendingHeartPositions = generateHeartPositions(messages.length);
    pendingCards = [];
    
    // 创建所有卡片但不播放动画
    messages.forEach((message, index) => {
        const card = createCard(message, index, pendingHeartPositions[index]);
        cardsWrapper.appendChild(card);
        pendingCards.push(card);
    });
}

// 开始播放卡片动画
function startAnimation() {
    // 开始播放所有卡片的动画
    pendingCards.forEach((card, index) => {
        // 延迟动画，每个卡片间隔200ms（0.2秒）显示
        animateCard(card, index * 200);
    });
    
    // 更新动画完成时间
    setTimeout(() => {
        isAnimationComplete = true;
    }, messages.length * 200 + 3000);
}

// 响应式处理
let resizeTimer;
let hasStarted = false;
window.addEventListener('resize', () => {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(() => {
        // 重置动画完成标志
        isAnimationComplete = false;
        initCards();
        // 如果已经开始播放，重新启动动画
        if (hasStarted) {
            startAnimation();
        }
    }, 250);
});

// 启动音频播放
function startAudio() {
    const bgMusic = document.getElementById('bgMusic');
    if (!bgMusic) return;
    
    // 设置音量（0-1之间，0.5表示50%音量）
    bgMusic.volume = 0.5;
    
    // 开始播放音频
    bgMusic.play().catch(() => {
        console.log('音频播放失败');
    });
}

// 启动函数：用户点击后执行
function handleStart() {
    const startScreen = document.getElementById('startScreen');
    
    // 标记已开始
    hasStarted = true;
    
    // 隐藏启动界面
    startScreen.classList.add('hidden');
    
    // 启动动画和音频
    startAnimation();
    startAudio();
}

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', () => {
    // 只创建卡片，不播放动画
    initCards();
    
    // 监听启动界面的点击事件
    const startScreen = document.getElementById('startScreen');
    startScreen.addEventListener('click', handleStart, { once: true });
    startScreen.addEventListener('touchstart', handleStart, { once: true });
});

// 鼠标移动视差效果（在卡片到位后）
// 第一阶段：200ms * 80 = 16000ms
// 第二阶段延迟：1000ms
// 第二阶段动画：1500ms
// 总时间：16000 + 1000 + 1500 + 500(缓冲) = 19000ms
let isAnimationComplete = false;

// 鼠标移动视差效果（仅在PC端启用）
document.addEventListener('mousemove', (e) => {
    if (isMobile() || !isAnimationComplete) return;
    
    const cards = document.querySelectorAll('.card');
    const centerX = window.innerWidth / 2;
    const centerY = window.innerHeight / 2;
    
    const deltaX = (e.clientX - centerX) / centerX;
    const deltaY = (e.clientY - centerY) / centerY;
    
    cards.forEach((card, index) => {
        const finalX = parseFloat(card.dataset.finalX);
        const finalY = parseFloat(card.dataset.finalY);
        
        const depth = 10;
        const moveX = deltaX * depth;
        const moveY = deltaY * depth;
        
        card.style.left = `${finalX + moveX}px`;
        card.style.top = `${finalY + moveY}px`;
    });
});

// 移动端触摸优化 - 防止误触
let touchStartTime = 0;
document.addEventListener('touchstart', () => {
    touchStartTime = Date.now();
}, { passive: true });

document.addEventListener('touchend', (e) => {
    const touchDuration = Date.now() - touchStartTime;
    // 如果触摸时间很短，可能是误触
    if (touchDuration < 100) {
        e.preventDefault();
    }
}, { passive: false });

